<template>
    <div class="home-wrapper">
        <div class="home-title">
            <span>{{ textList[activeI] }}</span>
        </div>
        <el-carousel height="100vh" @change="activeI = $event" :interval="5000">
            <el-carousel-item v-for="item in imageList" :key="item">
                <img class="car-img" :src="item" alt="介绍" @dblclick="router.push('/gen')">
            </el-carousel-item>
        </el-carousel>
        <div class="but-box">
            <el-button color="#FBA5FF" @click="router.push('/gen')">开始使用</el-button>
        </div>
        <div class="icon-help-box">
            <el-tooltip effect="light" placement="top-start"
                        content="去gitee获取源码和代码框架">
                <a href="https://gitee.com/v-function/generate" target="_blank">
                    <img src="@/assets/icons/gitee.svg" alt="github"/>
                </a>
            </el-tooltip>
            <el-tooltip effect="light" placement="top-start"
                        content="如何连接本站项目数据库？请发送邮箱至2873585297@qq.com">
                <a href="https://mail.qq.com/" target="_blank">
                    <el-icon size="30px" color="#f88141">
                        <InfoFilled/>
                    </el-icon>
                </a>
            </el-tooltip>
            <el-tooltip effect="light" placement="top-start">
                <a href="https://agree.vhans.cloud/" target="_blank">
                    <el-icon size="30px">
                        <img src="@/assets/icons/agree.svg" alt="agree"/>
                    </el-icon>
                </a>
                <template #content>
                    <a href="https://agree.vhans.cloud/" target="_blank">
                        <p style="margin: 0;">推荐一个我开发的校园信息发布与交友网站，快来看看吧！</p>
                        <img src="/images/agree.png" alt="agree"
                             style="width: 380px;height: 200px;object-fit: contain;"/>
                    </a>
                </template>
            </el-tooltip>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import router from "@/router"

const activeI = ref(0)

const imageList = [
    "/images/bg1.jpg",
    "/images/bg2.png",
    "/images/bg3.png",
    "/images/bg4.png",
    "/images/bg5.png",
    "/images/bg6.png",
]

const textList = [
    "欢迎来到我的代码生成器!",
    "第一步：在数据库工具中导入数据表到项目数据库中",
    "第二步：在本站中生成控制页面点击导入按钮",
    "第三步：选择要生成的数据表导入到生成列表中",
    "第四步：下面就可以进行生成操作啦",
    "第五步：支持调整每张表的生成参数",
]
</script>

<style scoped>
.home-wrapper {
    position: relative;
    width: 100%;
    min-width: 800px;
    height: 100vh;
    background: url(/images/bg.png) no-repeat;
    background-size: cover;

    .home-title {
        position: absolute;
        top: 0;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
        z-index: 1;

        span {
            background: linear-gradient(to right, #6700ff, #FBA5FF, #ff00c3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .car-img {
        margin: 60px 8% 0;
        width: 84%;
        height: calc(100vh - 140px);
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 0 15px 2px rgba(0, 0, 0, .5);
        opacity: 0.6;
        transition: opacity 0.4s ease-in;

        &:hover {
            opacity: 1;
        }
    }

    .but-box {
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;

        &:hover .el-button {
            opacity: 1;
        }

        .el-button {
            opacity: 0.2;
            transition: opacity 0.2s ease-in;
        }
    }
}
</style>